Skip to main content

Frontend architecture

The front is coded with NextJs.

image.png

  • src: optional application source folder
    • app: app router
      • (main): main project router. In general, we're going to put our front components inside, in (wrapper)
      • authentication: authentication project router
    • components: reusable reactor component
    • hooks: hooks custom
    • layout: sidebar, header, shared component like logo
    • services: encapsulate business logic and interactions with external services (APIs, databases, authentication, etc; to centralise and organise the management of data and operations, making the code more modular, maintainable and reusable.
    • store: centralised status storage
    • utils: common and reusable functionalities
  • .env.development: development environment variables
  • .env.production: production environment variables
  • postcss.config.js: configuration file for PostCss, javascript tool that transforms your CSS code into an abstract syntax tree (AST) and then provides an API (application programming interface) for analyzing and modifying it using JavaScript plugins.